<template>
  <div id="long-pass-successful">
  </div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "LongPassSuccessful",
    props:{
      longSuccess:{
        type:Number
      }
    },
    mounted() {
      // const data = [{"Goals":0,"number":479},{"Goals":0.1,"number":2},{"Goals":0.2,"number":24},{"Goals":0.3,"number":31},{"Goals":0.4,"number":18},{"Goals":0.5,"number":12},{"Goals":0.6,"number":8},{"Goals":0.7,"number":4},{"Goals":0.8,"number":7},{"Goals":0.9,"number":5},{"Goals":1,"number":1},{"Goals":1.2,"number":1},{"Goals":1.3,"number":1},{"Goals":1.4,"number":1},{"Goals":1.5,"number":1},{"Goals":1.6,"number":1},{"Goals":1.7,"number":2},{"Goals":1.8,"number":1},{"Goals":3.6,"number":2},{"Goals":5.3,"number":1}];
      const data =  [
        {
          "lpa": 0,
          "number": 88
        },
        {
          "lpa": 0.01,
          "number": 17
        },
        {
          "lpa": 0.02,
          "number": 96
        },
        {
          "lpa": 0.03,
          "number": 79
        },
        {
          "lpa": 0.04,
          "number": 49
        },
        {
          "lpa": 0.05,
          "number": 32
        },
        {
          "lpa": 0.06,
          "number": 20
        },
        {
          "lpa": 0.07,
          "number": 16
        },
        {
          "lpa": 0.08,
          "number": 14
        },
        {
          "lpa": 0.09,
          "number": 12
        },
        {
          "lpa": 0.1,
          "number": 4
        },
        {
          "lpa": 0.11,
          "number": 6
        },
        {
          "lpa": 0.12,
          "number": 9
        },
        {
          "lpa": 0.13,
          "number": 4
        },
        {
          "lpa": 0.14,
          "number": 2
        },
        {
          "lpa": 0.15,
          "number": 1
        },
        {
          "lpa": 0.16,
          "number": 3
        },
        {
          "lpa": 0.17,
          "number": 4
        },
        {
          "lpa": 0.18,
          "number": 4
        },
        {
          "lpa": 0.19,
          "number": 2
        },
        {
          "lpa": 0.2,
          "number": 2
        },
        {
          "lpa": 0.22,
          "number": 3
        },
        {
          "lpa": 0.23,
          "number": 2
        },
        {
          "lpa": 0.24,
          "number": 2
        },
        {
          "lpa": 0.25,
          "number": 1
        },
        {
          "lpa": 0.26,
          "number": 2
        },
        {
          "lpa": 0.3,
          "number": 1
        },
        {
          "lpa": 0.31,
          "number": 1
        },
        {
          "lpa": 0.32,
          "number": 1
        },
        {
          "lpa": 0.34,
          "number": 2
        },
        {
          "lpa": 0.38,
          "number": 1
        },
        {
          "lpa": 0.47,
          "number": 1
        },
        {
          "lpa": 0.57,
          "number": 1
        },
        {
          "lpa": 0.59,
          "number": 1
        },
        {
          "lpa": 0.61,
          "number": 1
        },
        {
          "lpa": 0.65,
          "number": 1
        },
        {
          "lpa": 0.66,
          "number": 1
        },
        {
          "lpa": 0.74,
          "number": 1
        },
        {
          "lpa": 0.78,
          "number": 1
        },
        {
          "lpa": 0.83,
          "number": 1
        },
        {
          "lpa": 0.97,
          "number": 2
        }
      ]
      const current_player_longSuccess = this.longSuccess;
      const column = new Column('long-pass-successful', {
        data,
        width: 200,
        height: 150,
        // autoFit:false,
        xField: 'lpa',
        yField: 'number',
        xAxis: {
          label: {
            formatter:(lpa)=>{
              if(lpa === '0.97次') {
                return '0.97次'
              }
              return null
            },
            autoHide:false,
            autoRotate: false,
            // position:'left'
          },
          tickLine:null,
          title:null,
          line:null,
          subTickLine:null,
          grid:null,
        },
        yAxis:{
          label:{
            formatter:(number)=>{
              return parseFloat(number)
            },
          },
          title:null,
        },
        meta:{
          lpa: {
            alias:'长传成功',
            formatter:(v)=>{
              return v + '次'
            }
          },
          number: {
            alias:'球员人数',
            formatter:(v)=>{
              return v + '人'
            }
          },
        },
        // maxColumnWidth: 20,
        title: {
          visible: true,
          text: '长传总数/90',
          style:{
            fontSize: 14,
            fill: 'red',
          }
        },
        // colorField: 'lpa',
        // 如果需要特殊对某个值设置颜色就不能够设置colorField
        color:({lpa})=>{
          if(lpa === current_player_longSuccess){
            return '#29a5da';
          }
          return '#DCF1FA';
        },
        columnStyle:{

        },
        minColumnWidth: 2,
        maxColumnWidth:50,
        // columnSize:15,
        columnWidthRatio:1,
        legend:{
          visible: false
        },
        tooltip:{
          fields:['lpa','number',],
          domStyles:{
            'g2-tooltip':{
              width: '150px',
              height:'60px'
            },
            'g2-tooltip-title':{
              display:'none'
            },
            'g2-tooltip-list-item':{
              width:'150px',
              // height:'30px',
              display: 'flex',
              justifyContent:'flexStart'
            },
            'g2-tooltip-marker':{
              marginTop:'3px'
            }
          },
        },
      });
      column.render();
    }
  }
</script>

<style scoped>
  #long-pass-successful {
    margin-top: -1px;
    width: 240px;
    height: 180px;
  }
</style>


